<template>
	<view class="page-wrapper">
		<!-- <view class="close-page" @tap="handleJump" data-type="BACK"><text class="fu-iconfont">&#xe7be;</text></view> -->

		<!-- 头部 -->
		<view class="page-header">
			<image class="logo" mode="aspectFill" :src="SYSTEM_CONFIG.logo"></image>
			<!-- <image class="page-header-bg" :src="STATIC_IMAGE_BASE_URL + '/login/login_top_bg.png'"></image>
      <view class="page-header-content">
        <image class="logo" mode="aspectFill" :src="SYSTEM_CONFIG.logo"></image>
        <view class="title">欢迎来到 {{SYSTEM_CONFIG.appName}}</view>
      </view> -->
		</view>

		<view class="page-content">
			<!-- 手机号注册 -->
			<view class="form-wapper">
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/phone1.png" mode=""></image>
					<view class="phone input-wapper">
						<view class="mobile rside">
							<input :focus="isMobile.focus" @blur="loseFocus('mobile')" @input="enterAccount('mobile')"
								placeholder-class="input-placeholder" type="number" v-model="phone" placeholder="请输入手机号"
								maxlength="11" />
							<image v-show="isMobile.delete" @click="onDelete('mobile')" class="close"
								src="../../../static/empty/close.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/security1.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input :focus="isCode.focus" @blur="loseFocus('code')" @input="enterAccount('code')"
								placeholder-class="input-placeholder" type="number" v-model="vercode"
								placeholder="请输入验证码" maxlength="6" />
							<image v-show="isCode.delete" @click="onDelete('code')" class="close"
								src="../../../static/empty/close.png" mode=""></image>
						</view>
						<button class="get-code-btn" type="default" :loading="verCodeBtnLoading"
							@click="handleSendVerCode">
							{{ beginning ? '倒计时' + time + 's' : '获取验证码' }}
						</button>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/password.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input :focus="isPassword.focus" @blur="loseFocus('password')"
								@input="enterAccount('password')" placeholder-class="input-placeholder"
								v-if="passwordInputType == 'password'" type="password" v-model="password"
								placeholder="请设置密码(6-12位数字及字母)" maxlength="12" />
							<input :focus="isPassword.focus" @blur="loseFocus('password')"
								@input="enterAccount('password')" placeholder-class="input-placeholder"
								v-if="passwordInputType == 'text'" type="text" v-model="password"
								placeholder="请设置密码(6-12位数字及字母)" maxlength="12" />
							<image v-show="isPassword.delete" @click="onDelete('password')" class="close"
								src="../../../static/empty/close.png" mode=""></image>
						</view>
						<view class="eye" @tap="handleTogglePasswordInputType('password')">
							<text class="fu-iconfont" v-if="passwordInputType == 'password'">&#xe7e9;</text>
							<text class="fu-iconfont" v-if="passwordInputType == 'text'">&#xe7e6;</text>
						</view>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/password.png" mode=""></image>
					<view class="code input-wapper">
						<view class="rside">
							<input :focus="isNewPassword.focus" @blur="loseFocus('newpassword')"
								@input="enterAccount('newpassword')" placeholder-class="input-placeholder"
								v-if="newpasswordInputType == 'password'" type="password" v-model="newpassword"
								placeholder="请设置密码(6-12位数字及字母)" maxlength="12" />
							<input :focus="isNewPassword.focus" @blur="loseFocus('newpassword')"
								@input="enterAccount('newpassword')" placeholder-class="input-placeholder"
								v-if="newpasswordInputType == 'text'" type="text" v-model="newpassword"
								placeholder="请设置密码(6-12位数字及字母)" maxlength="12" />
							<image v-show="isNewPassword.delete" @click="onDelete('newpassword')" class="close"
								src="../../../static/empty/close.png" mode=""></image>
						</view>
						<view class="eye" @tap="handleTogglePasswordInputType('newpassword')">
							<text class="fu-iconfont" v-if="newpasswordInputType == 'password'">&#xe7e9;</text>
							<text class="fu-iconfont" v-if="newpasswordInputType == 'text'">&#xe7e6;</text>
						</view>
					</view>
				</view>
				<view class="form-wapper-item">
					<image class="xs-phhone" src="../../../static/xs_icon/invitation.png" mode=""></image>
					<view class="phone input-wapper">
						<view class="mobile rside">
							<input :focus="isMechanism.focus" @blur="loseFocus('mechanism')"
								@input="enterAccount('mechanism')" placeholder-class="input-placeholder" type="text"
								v-model="name" placeholder="请输入培训机构名称" />
							<image v-show="isMechanism.delete" @click="onDelete('mechanism')" class="close"
								src="../../../static/empty/close.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="login-btn-wrapper">
				<button class="login-btn" :class="{ btnFalse: !agreement }" :loading="registerBtnLoding"
					@click="handleRegister">注册</button>
				<!-- <view class="agreement" style="padding: 20rpx 0; margin: 0; text-align: right;">已有账号，前去<text @tap="handleJump" data-type="BACK">登录</text></view> -->
			</view>
		</view>

		<view class="agreement">
			<image v-if="!agreement" src="../../../static/xs_icon/chose.png" mode="" @click="onAgreement()"></image>
			<image v-else src="../../../static/xs_icon/shoseSel.png" mode="" @click="onAgreement()"></image>
			<text>点击查看</text>
			<text class="text" @tap="handleJump" data-url="/pages/agreement?data=user_agreement">《用户注册协议》</text>
		</view>

		<!-- 注册提醒框 -->
		<u-modal v-model="show" title="欢迎注册航海人软件" :content="content" show-cancel-button></u-modal>
		<!-- 注册成功弹窗 -->
		<successPop :showPopup="showPopup" :showTitle="'注册成功'" @confirm="confirm"></successPop>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/index';
	import {
		SYSTEM_CONFIG
	} from '@/common/config.js';
	import successPop from '@/components/xs-components/success-pop/success-pop.vue';
	// import noData from '@/components/xs-components/noData.vue';

	export default {
		components: {
			successPop
		},
		data() {
			return {
				isMobile: {
					focus: false,
					delete: false
				},
				isCode: {
					focus: false,
					delete: false
				},
				isPassword: {
					focus: false,
					delete: false
				},
				isNewPassword: {
					focus: false,
					delete: false
				},
				isMechanism: {
					focus: false,
					delete: false
				},
				SYSTEM_CONFIG, // 系统配置

				/*================================================
      =            使用此模板你需要修改的参数            =
      =================================================*/

				STATIC_IMAGE_BASE_URL: '/fu-templete/static/', // 图片基础路径
				OPEN_PUSH_AUTH: true, // 是否开启推送

				/*=====  End of 使用此模板你可能需要改到的参数  ======*/

				phone: '', // 手机号
				vercode: '', // 验证码
				password: '', // 密码
				newpassword: '', // 确认密码
				name: '', // 培训机构名称

				registerBtnLoding: false, // 注册按钮加载动画
				verCodeBtnLoading: false, // 获取验证码按钮动画

				passwordInputType: 'password', // 密码输入框类型 用于显示隐藏密码
				newpasswordInputType: 'password', // 密码输入框类型 用于显示隐藏密码

				/*========================================
      =            发送验证码所需参数            =
      =========================================*/

				time: 60,
				beginning: false,

				/*=====  End of 发送验证码所需参数  ======*/
				agreement: false, // 同意协议
				showPopup: false, // 注册成功弹窗
				show: false, // 注册提醒
				content: '温馨提示：注册账号仅可在该手机客户端登录，请确认是否使用该手机进行注册。'
			};
		},

		onLoad() {
			this.show = true;
			// console.log(plus.device.imei)
			// console.log(plus.push.getClientInfo())
			// plus.device.getAAID({
			// 	success: function(e) {
			// 		console.log(e)
			// 	},
			// 	fail: function(e) {
			// 		console.log(e);
			// 	}
			// });
		},

		methods: {
			enterAccount(e) {
				if (e == 'mobile') {
					if (this.account != '') {
						this.isMobile.delete = true;
					} else {
						this.isMobile.delete = false;
					}
				} else if (e == 'code') {
					if (this.vercode != '') {
						this.isCode.delete = true;
					} else {
						this.isCode.delete = false;
					}
				} else if (e == 'password') {
					if (this.password != '') {
						this.isPassword.delete = true;
					} else {
						this.isPassword.delete = false;
					}
				} else if (e == 'newpassword') {
					if (this.newpassword != '') {
						this.isNewPassword.delete = true;
					} else {
						this.isNewPassword.delete = false;
					}
				} else if (e == 'mechanism') {
					if (this.name != '') {
						this.isMechanism.delete = true;
					} else {
						this.isMechanism.delete = false;
					}
				}
			},
			onDelete(e) {
				if (e == 'mobile') {
					this.phone = '';
					this.isMobile.focus = true;
					this.isMobile.delete = false;
				} else if (e == 'code') {
					this.vercode = '';
					this.isCode.focus = true;
					this.isCode.delete = false;
				} else if (e == 'password') {
					this.password = '';
					this.isPassword.focus = true;
					this.isPassword.delete = false;
				} else if (e == 'newpassword') {
					this.newpassword = '';
					this.isNewPassword.focus = true;
					this.isNewPassword.delete = false;
				} else if (e == 'mechanism') {
					this.name = '';
					this.isMechanism.focus = true;
					this.isMechanism.delete = false;
				}
			},
			loseFocus(e) {
				if (e == 'mobile') {
					console.log(111111);
					this.isMobile.focus = false;
				} else if (e == 'code') {
					this.isCode.focus = false;
				} else if (e == 'password') {
					this.isPassword.focus = false;
				} else if (e == 'newpassword') {
					this.isNewPassword.focus = false;
				} else if (e == 'mechanism') {
					this.isMechanism.focus = false;
				}
			},

			// 注册
			handleRegister() {
				if (!this.agreement) return this.$message.info('请同意用户协议');
				if (this.registerBtnLoding) return false;
				let {
					phone,
					vercode,
					password,
					newpassword,
					OPEN_PUSH_AUTH,
					name
				} = this;
				let clientId = 'clientId';
				let appSystem = 'appSystem';

				if (!validate(phone, 'phone')) return this.$message.info('请正确输入手机号');
				if (!vercode) return this.$message.info('请正确输入验证码');
				if (!validate(password, 'password')) return this.$message.info('请设置密码为6-12位字母加数字的组合');
				if (!validate(newpassword, 'password')) return this.$message.info('请设置密码为6-12位字母加数字的组合');
				if (password != newpassword) return this.$message.info('两次密码输入不一致');
				if (name == '') return this.$message.info('请输入培训机构名称');

				this.registerBtnLoding = true;

				// #ifdef APP-PLUS
				if (OPEN_PUSH_AUTH) {
					// clientId = plus.push.getClientInfo().clientid || '';
					clientId = plus.device.imei;
					appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
				}
				// #endif
				this.$api
					.post(global.apiUrls.postRegisterByMobile, {
						mobile: phone,
						code: vercode,
						password,
						security_code: newpassword,
						client_id: clientId,
						appSystem,
						training_institution: name,
						type: '1' // 1注册  2忘记密码 3登录 4修改手机号
					})
					.then(res => {
						console.log(res);
						this.registerBtnLoding = false;
						if (res.data.code == 1) {
							this._registerSuccess(res);
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.registerBtnLoding = false;
					});
			},

			// 注册成功
			_registerSuccess(res) {
				// this.$popup.showModal('注册提醒', '一个账号只能一个手机用，是否确定用此手机进行注册？').then(res => {
				// 	console.log(res);
				// });
				console.log(res);
				if (res.data.code == 1) {
					global.token = res.data.data.userinfo.user_token;
					global.userInfo = res.data.data.userinfo;
					try {
						uni.setStorageSync('USER_TOKEN', global.token);
						uni.setStorageSync('USER_INFO', global.userInfo);
						console.log(global.token);
						console.log(global.userInfo);
						this.showPopup = true;
						// uni.$emit('appLoginSuccess', { msg: '登录成功' });
						// setTimeout(() => {
						// 	wx.navigateBack({
						// 		delta: 1
						// 	});
						// }, 1000);
					} catch (e) {}
				}
			},

			// 切换密码输入框类型
			handleTogglePasswordInputType(type) {
				if (type == 'password') {
					this.passwordInputType = this.passwordInputType == 'password' ? 'text' : 'password';
				} else {
					this.newpasswordInputType = this.newpasswordInputType == 'password' ? 'text' : 'password';
				}
			},

			// 发送验证码
			handleSendVerCode() {
				if (this.verCodeBtnLoading) return false;
				let {
					phone
				} = this;
				if (!validate(phone, 'phone')) return this.$message.info('请正确输入手机号');
				if (this.beginning) return false;

				this.verCodeBtnLoading = true;
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						mobile: phone,
						event: 'register',
						type: 1
					})
					.then(res => {
						this.verCodeBtnLoading = false;
						if (res.data.code == 1) {
							this.$message.info('验证码已发送至手机' + phone + '请注意查收');
							// 显示倒计时
							this.beginning = true;

							// 开始倒计时
							this.timer = setInterval(() => {
								let tempTime = this.time;
								if (tempTime == 0) {
									// 倒计时结束
									clearInterval(this.timer);
									this.beginning = false;
									this.time = 60;
									return;
								}
								this.time--;
							}, 1000);
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.verCodeBtnLoading = false;
					});
			},
			// 同意用户协议
			onAgreement() {
				this.agreement = !this.agreement;
			},
			// 确认
			confirm(e) {
				this.showPopup = e;
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home/home'
					});
				}, 100);
			}
		}
	};
</script>
<style lang="scss">
	@import './index.scss';
</style>
